<template>
  <!--业绩列表-->
  <div>
    <wv-tabs v-model="activeIndex" class="container" @click="changeData()">
      <wv-tab title="全部">
        <ul class="list">
          <li v-for="item in achievementList">
            <ul>
              <li><span>{{item.userName}}</span></li>
              <li>{{item.goodsName}} <span>×{{item.goodsNum}}</span></li>
              <li><p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}}<span class="status" v-if="item.achievementState==2">失效</span></p> <span>{{item.createDate}}</span></li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">讯联微信</p>
                <p v-if="item.payType=='PAY_WX_YINLIAN'"><img src="../../assets/weixin.png" alt="" width="15">银联微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}</p>
                <span>{{item.payAmount}}元</span>
              </li>
            </ul>
          </li>
        </ul>
        <!--<p class="nomore">没有更多了</p>-->
      </wv-tab>
      <wv-tab title="卡">
        <ul class="list">
          <li v-for="item in achievementList">
            <ul>
              <li><span>{{item.userName}}</span></li>
              <li>{{item.goodsName}} <span>×{{item.goodsNum}}</span></li>
              <li><p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}}</p><span class="status" v-if="item.achievementState==2">失效</span> <span>{{item.createDate}}</span></li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">讯联微信</p>
                <p v-if="item.payType=='PAY_WX_YINLIAN'"><img src="../../assets/weixin.png" alt="" width="15">银联微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}</p>
                <span>{{item.payAmount}}元</span>
              </li>
            </ul>
          </li>
        </ul>
      </wv-tab>
      <wv-tab title="其他商品">
        <ul class="list">
          <li v-for="item in achievementList">
            <ul>
              <li><span>{{item.userName}}</span></li>
              <li>{{item.goodsName}} <span>×{{item.goodsNum}}</span></li>
              <li><p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}}</p><span class="status" v-if="item.achievementState==2">失效</span> <span>{{item.createDate}}</span></li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">讯联微信</p>
                <p v-if="item.payType=='PAY_WX_YINLIAN'"><img src="../../assets/weixin.png" alt="" width="15">银联微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}</p>
                <span>{{item.payAmount}}元</span>
              </li>
            </ul>
          </li>
        </ul>
      </wv-tab>
    </wv-tabs>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: '',
    props: {
      achievementList: {type:Array}
    },
    data() {
      return {
        activeIndex: 0
      };
    },
    methods: {
      changeData(){
          this.$emit("changeActiveIndex",this.activeIndex)
      }
    },
    created() {
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .list{
    >li{
      margin: 15px 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      li{
        margin-bottom: 10px;
      }
      li:first-child{
        font-size: 16px;
        color: #111;
        font-weight: 700;
        span{
          color: #999;
          margin-left: 10px;
        }
      }
      li:nth-child(2){
        background-color: #f8f8f8;
        border-radius: 5px;
        line-height: 35px;
        height: 35px;
        color: #666;
        padding: 0 10px;
        span{
          font-size: 15px;
          float: right;
        }
      }
      li:nth-child(3),li:last-child{
        font-size: 12px;
        color: #666;
        display: flex;
        img{
          margin-right: 5px;
        }
        p,span{
          flex: 1;
        }
        span{
          text-align: right;
        }
      }
      li:nth-child(3){
        .status{
          color: #f98e3c;
          border:1px solid #f98e3c;
          margin-left: 5px;
          padding: 2px 3px;
        }
        img{
          vertical-align: text-bottom;
        }
      }
      li:last-child{
        img{
          vertical-align: middle;
        }
        span{
          color: #f98e3c;
          font-size: 15px;
        }
      }
    }

  }
  .nomore{
    font-size: 13px;
    color: #999;
    padding: 10px 0;
  }
</style>
